<template>
	<view>
		<carHeader :title="title"></carHeader>
		<view class="status-container">
			<view v-for="(item,index) in statusList" :key="index">
				<view class="status-item" :class="{ 'active': item.flag }" @click="change(index)">
					<text>{{item.status}}</text>
				</view>
			</view>
		</view>
		<view v-if="name == '待使用'" class="body">
			<view v-for="(item,index) in data_dsy" :key="index" class="yhq yhq_dsy">
				<text class="price">
					{{item.price}}
				</text>
				<text class="manjian">
					{{item.manjian}}
				</text>
				<text class="jiayouzhan">
					{{item.jiayouzhan}}
				</text>
				<text class="zt">
					{{item.zt}}
				</text>
				<text class="time">
					{{item.time1}}—{{item.time2}}
				</text>
				<view class="xuxian">
				</view>
			</view>
		</view>
		<view v-if="name == '已使用'" class="body">
			<view v-for="(item,index) in data_ysy" :key="index" class="yhq yhq_ysy">
				<text class="price">
					{{item.price}}
				</text>
				<text class="manjian">
					{{item.manjian}}
				</text>
				<text class="jiayouzhan">
					{{item.jiayouzhan}}
				</text>
				<text class="zt">
					{{item.zt}}
				</text>
				<text class="time">
					{{item.time1}}—{{item.time2}}
				</text>
				<view class="xuxian">
				</view>
			</view>
		</view>
		<view v-if="name == '已过期'" class="body">
				<view v-for="(item,index) in data_ygq" :key="index" class="yhq yhq_ygq">
					<text class="price_gq_icon">
						￥
					</text>
					<text class="price_gq">
						{{item.price}}
					</text>
					<text class="manjian">
						{{item.manjian}}
					</text>
					<text class="jiayouzhan">
						{{item.jiayouzhan}}
					</text>
					<text class="zt">
						{{item.zt}}
					</text>
					<text class="time">
						{{item.time1}}—{{item.time2}}
					</text>
					<view class="xuxian">
					</view>
			</view>	
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '优惠券',
				statusList: [{
						status: "待使用",
						flag: true
					},
					{
						status: "已使用",
						flag: false
					},
					{
						status: "已过期",
						flag: false
					}
				],
				name:"待使用",
				data_dsy: [{
						price: 20,
						manjian: 200,
						jiayouzhan: "郑州",
						time1: "2024.07.12",
						time2: "2024.11.30",
						zt: "去使用"
					},
					{
						price: 30,
						manjian: 300,
						jiayouzhan: "西安",
						time1: "2024.06.13",
						time2: "2024.07.12",
						zt: "去使用"
					}
				],
				data_ysy: [{
						price: 20,
						manjian: 200,
						jiayouzhan: "郑州",
						time1: "2024.07.12",
						time2: "2024.11.30",
						zt: "已使用"
					},
					{
						price: 30,
						manjian: 300,
						jiayouzhan: "西安",
						time1: "2024.06.13",
						time2: "2024.07.12",
						zt: "已使用"
					}
				],
				data_ygq: [{
						price: 20,
						manjian: 200,
						jiayouzhan: "郑州",
						time1: "2024.07.12",
						time2: "2024.11.30",
						zt: "已过期"
					},
					{
						price: 30,
						manjian: 300,
						jiayouzhan: "西安",
						time1: "2024.06.13",
						time2: "2024.07.12",
						zt: "已过期"
					}
				]
			};
		},
		methods: {
			change(index) {
				for (var i = 0; i < this.statusList.length; i++) {
					this.statusList[i].flag = false;
				}
				this.statusList[index].flag = true;
				this.name = this.statusList[index].status;
			}
		}
	}
</script>

<style lang="scss">
	* {
		box-sizing: border-box;
	}

	.carHeader {
		background-size: cover;
		padding-top: 8%;
	}

	.status-container {
		margin-top: -20%;
		display: flex;
		justify-content: space-around;
	}

	.status-item {
		padding: 5rpx 10rpx;
		color: #ffffff;
	}

	.body {
		width: 90%;
		background-color: white;
		margin: 5%;
		overflow: hidden;
		padding-top: 5%;
		border-radius: 50rpx;
	}

	.yhq {
		position: relative;
		height: 210rpx;
		margin: 0% 5% 5%;
		background-repeat: no-repeat;
		background-size: contain;
	}
	.yhq_dsy{
		background-image: url('/static/车联网服务-08我的-08优惠券-01待使用_slices/椭圆 3 拷贝.png');	
	}
	.yhq_ysy{
		background-image: url('/static/车联网服务-08我的-08优惠券-02已使用_slices/椭圆 3 拷贝.png');
	}
	.yhq_ygq{
		background-image: url('/static/车联网服务-08我的-08优惠券-02已使用_slices/椭圆 3 拷贝.png');
	}

	.price::before {
		content: '￥';
		font-size: 30rpx;
	}

	.price {
		position: absolute;
		top: 40rpx;
		left: 450rpx;
		color: white;
		font-size: 70rpx;
	}
	
	.price_gq_icon{
		position: absolute;
		top: 84rpx;
		left: 450rpx;
		color: white;
		font-size: 30rpx;
	}

	.price_gq{
		position: absolute;
		top: 40rpx;
		left: 480rpx;
		color: white;
		font-size: 70rpx;
		text-decoration: line-through;
	}

	.manjian::before {
		content: '满';
	}

	.manjian {
		position: absolute;
		top: 80rpx;
		left: 40rpx;
		color: white;
		font-weight: bold;
	}

	.manjian::after {
		content: '元可用';
	}

	.jiayouzhan::before {
		content: '仅限于';
	}

	.jiayouzhan {
		position: absolute;
		top: 40rpx;
		left: 40rpx;
		font-size: .5em;
		color: white;
	}

	.jiayouzhan::after {
		content: '加油站使用';
	}
	
	.xuxian{
		position: absolute;
		top: 140rpx;
		left: 17rpx;
		width: 570rpx;
		border-bottom: 1rpx dashed white;
	}

	.zt {
		position: absolute;
		top: 165rpx;
		left: 500rpx;
		color: white;
		font-size: .5em;
	}
	
	.zt::after{
		content: ' >';
	}

	.time::before{
		content: '有效期值：';
	} 
	.time {
		position: absolute;
		top: 165rpx;
		left: 40rpx;
		color: white;
		font-size: .5em
	}

	.active {
		padding-bottom: 10rpx;
		border-bottom: 5rpx solid white;
	}
</style>